<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">服务管理</span>
  </div>
  <div>
    <el-card style="margin:5px;height: 70px;">
      <el-form inline="inline">
        <el-form-item label="服务名称" style="width: 220px;">
          <el-input placeholder="请输入服务名称"
                    v-model="searchDsService.name"
                    @keydown.enter.prevent="loadDsService">
          </el-input>
        </el-form-item>
        <el-form-item label="服务状态" style="width: 220px;">
          <el-select placeholder="请选择服务状态"
                     v-model="searchDsService.status"
                     @keydown.enter.prevent="loadDsService">
            <el-option label="启用" value="10"></el-option>
            <el-option label="禁用" value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadDsService">搜索</el-button>
          <el-button @click="loadServiceType" type="primary">查询服务类型</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:5px;">
      <div style="margin: 10px 0px 40px 10px;">
        服务列表
        <el-button @click="addDsService" type="primary" style="float:right;margin-top: -3px;">新增服务</el-button>
      </div>
      <div>
        <el-table :data="dsServiceArr">
          <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
          <el-table-column prop="name" label="服务名称" align="center"></el-table-column>
          <el-table-column  prop="description" label="服务描述" align="center"></el-table-column>
          <el-table-column prop="price" label="服务价格" align="center"></el-table-column>
          <el-table-column prop="cycle" label="服务周期" align="center"></el-table-column>
          <el-table-column prop="status" label="服务状态" align="center">
            <template #default="scope">
              <el-switch :active-value="10" :inactive-value="20"
                         v-model="scope.row.status"
                         @change="changeStatus(scope.row.id, scope.row.status)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column  prop="createTime" label="创建时间" align="center"></el-table-column>
          <el-table-column  prop="updateTime" label="更新时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button @click="editeDsService(scope.row)" link type="primary" size="small">编辑</el-button>
              <el-button @click="delDsService(scope.row.id)" link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               :close-on-click-modal="false" style="width:800px;padding:40px;">
      <el-form label-position="top" label-width="80px">
        <el-form-item label="服务名称">
          <el-input  placeholder="请输入服务名称" v-model="dsService.name"></el-input>
        </el-form-item>
        <el-form-item label="服务描述">
          <el-input  placeholder="请输入服务描述" v-model="dsService.description"></el-input>
        </el-form-item>
        <el-form-item label="服务价格">
          <el-input placeholder="请输入服务价格" v-model="dsService.price"></el-input>
        </el-form-item>
        <el-form-item label="服务周期">
          <el-input placeholder="请输入服务周期" v-model="dsService.cycle"></el-input>
        </el-form-item>
        <el-form-item label="服务状态">
          <el-select placeholder="请选择服务状态" v-model="dsService.status">
            <el-option label="启用" value="10"></el-option>
            <el-option label="禁用" value="20"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="saveDsService" type="primary">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import router from "@/router";
import axios from "axios";
import { ElMessage } from "element-plus";

const searchDsService = ref({})
const dsServiceArr=ref([])
const  resetSearch=()=>{
  searchDsService.value={}
  loadDsService()
}
const loadDsService=()=>{
  axios.post(BASE_URL+'/v1/dsService/select',searchDsService.value)
      .then((response)=>{
        if(response.data.code==2000){
          dsServiceArr.value=response.data.data
        }else{
          ElMessage.error(response.data.msg)
        }
      })
}
onMounted(()=>loadDsService())

const dialogTitle=ref()
const dialogVisible=ref(false)
const dsService=ref()
const handleClose = () => {
  if (confirm("确定要关闭窗口吗")){
    dialogVisible.value=false
    dsService.value={}
  }
}
const addDsService=()=>{
  dialogTitle.value="新增服务"
  dialogVisible.value=true
  dsService.value={}
}
const editeDsService=(s)=>{
  dsService.value=s
  dialogTitle.value="编辑服务"
  dialogVisible.value=true
  loadDsService()
}
const saveDsService=()=>{
  if(confirm("确定要保存吗")){
    axios.post(BASE_URL+'/v1/dsService/save',dsService.value)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("保存成功")
            dsService.value={}
            dialogVisible.value=false
            loadDsService()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const loadServiceType = () => {
  dsServiceArr.value= dsServiceArr.value.filter(item => item.parentId == null)
}
const changeStatus = (id,status)=>{
  axios.post(BASE_URL+'/v1/dsService/update/status/'+id+'/'+status)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success("修改成功")
          loadDsService()
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const delDsService=(id)=>{
  if(confirm("确定要删除该服务吗？")){
    axios.post(BASE_URL+'/v1/dsService/delete/'+id)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("删除成功")
            loadDsService()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
</script>

<style scoped>

</style>